<template>
  <div id="app" class="container">
    <div class="content">
      <transition enter-active-class="animate__animated animate__fadeInLeft">
        <router-view/>
      </transition>
    </div>
    <ul class="nav">
      <li :class="current == 'Home' ? 'active' : ''" @click="current = 'Home'">
        <router-link :to="{name:'Home'}">
        <i class="fa fa-home" />
        
        </router-link>
        首页
      </li>
      <li :class="current == 'Hot' ? 'active' : ''" @click="current = 'Hot'" >
        <router-link :to="{name:'Hot'}">
        <i class="fa fa-fire" />
        </router-link>热卖
      </li>
      <li :class="current == 'Cart' ? 'active' : ''" @click="current = 'Cart'">
        <router-link :to="{name:'Cart'}" >
        <i class="fa fa-shopping-cart" />
        </router-link>购物车
      </li>
      <li :class="current == 'User' ? 'active' : ''" @click="current = 'User'">
        <router-link :to="{name:'User'}">
        <i class="fa fa-user" />
        </router-link>我的
      </li>
    </ul>
  </div>
</template>

<script>


export default {
  name: "App", // 为组件起一个名字
  data() {
    return {
      current: "Home",
    };
  },
  created() {
    
  },
  components: {
   
  },
  methods: {
    
  },
};
</script>

<style>
.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  overflow: auto;
}
.nav {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 1px 2px 6px;
}
.nav li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}
.nav li i {
  font-size: 1.2rem;
}
.nav li.active {
  color: deeppink;
}
</style>
